<template>
  <div class="app-container">
    <div class="titleInfo">
      <el-image :src="deliveryDetailData.detail.personalImagePhoto" style="width: 100px; vertical-align: middle" fit="fill" />
      <div class="carinfo">
        <p>姓名:{{ deliveryDetailData.detail.fullName }}</p>
        <p>
          电话:{{ deliveryDetailData.detail.phonenumber
          }}<el-button link type="primary" v-copy="deliveryDetailData.detail.phonenumber" :icon="DocumentCopy"></el-button>
        </p>
      </div>
    </div>
    <div class="baicInfo">
      <div>
        <div>身份证<span>(目前仅支持中国大陆居民身份证)</span></div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="detailData"
          >
            <el-table-column label="姓名" prop="fullName" />
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="性别" prop="sex">
              <template #default="scope">
                <span v-if="scope.row.sex == '0'">男</span>
                <span v-else-if="scope.row.sex == '1'">男</span>
                <span v-else>未知</span>
              </template>
            </el-table-column>
            <el-table-column label="出生日期" prop="birthday" />
            <el-table-column label="身份证号" prop="idCardNo" />
            <el-table-column label="身份证头像面" prop="idCardHeadPhoto">
              <template #default="scope">
                <el-image :src="scope.row.idCardHeadPhoto" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="身份证国徽面" prop="idCardBackPhoto">
              <template #default="scope">
                <el-image :src="scope.row.idCardBackPhoto" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="个人形象照" prop="personalImagePhoto">
              <template #default="scope">
                <el-image :src="scope.row.personalImagePhoto" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="证件有效期" prop="idCardValidityStartTime">
              <template #default="scope">
                {{ scope.row.idCardValidityStartTime }} - {{ scope.row.idCardValidityEndTime }}
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" />
          </el-table>
        </div>
        <div>健康证</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="healthCertificateData"
          >
            <el-table-column label="资质名称" prop="healthCertificateName" />
            <el-table-column label="有效时间" prop="validStartTime">
              <template #default="scope"> {{ scope.row.validStartTime }} - {{ scope.row.validEndTime }} </template>
            </el-table-column>
            <el-table-column label="证件状态" prop="status" />
            <el-table-column label="证件照片" prop="healthCertificateUrl">
              <template #default="scope">
                <el-image :src="scope.row.healthCertificateUrl" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>驾驶信息<span>（同一配送员可有多张驾驶证）</span></div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="deliveryDetailData.driverLicense"
          >
            <el-table-column label="驾驶证类型" prop="drivingLicenseTypeName" />
            <el-table-column label="驾驶证图片" prop="drivingLicensePhoto">
              <template #default="scope">
                <el-image :src="scope.row.drivingLicensePhoto" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="驾驶证号" prop="drivingLicenseNo" />
            <el-table-column label="驾驶证年龄" prop="drivingLicenseYears" />
            <el-table-column label="实际驾龄" prop="actualDrivingYears" />
            <el-table-column label="驾驶证有效期" prop="drivingLicenseValidityStartTime">
              <template #default="scope">
                {{ scope.row.drivingLicenseValidityStartTime }} - {{ scope.row.drivingLicenseValidityEndTime }}
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" />
          </el-table>
        </div>
        <div>
          <el-input type="textarea" v-model="reason" placeholder="请输入未通过审核原因"></el-input>
        </div>
        <div class="btn-container">
          <el-button type="default" @click="handleNo">未通过</el-button>
          <el-button type="primary" @click="handleYes">通过</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup name="examineDetail">
import { Delivery } from "@/api/interface/city/organizationManage";
import { examineAPI, getDeliveryDetailAPI } from "@/api/modules/city/organizationAPI";
import { DocumentCopy } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const reason = ref<string>("");
const route = useRoute();
const router = useRouter();
const examineParms = ref<Delivery.ExamineParams>({
  userId: 0,
  auditStatus: "string",
  reason: "string"
});
const deliveryDetailData = ref<Delivery.DetailData>({
  detail: {
    userId: 1,
    fullName: "string",
    userName: "string",
    age: -2147483648,
    sex: "string",
    birthday: "2019-08-24T14:15:22.123Z",
    idCardNo: "string",
    phonenumber: "string",
    status: "0",
    reason: "string",
    auditStatus: "0",
    delFlag: "0",
    idCardAuditStatus: "0",
    idCardValidityStatus: "s",
    idCardValidityStartTime: "2019-08-24T14:15:22.123Z",
    idCardValidityEndTime: "2019-08-24T14:15:22.123Z",
    entryDate: "2019-08-24",
    leaveDate: "2019-08-24",
    idCardHeadPhoto: "string",
    idCardBackPhoto: "string",
    personalImagePhoto: "string",
    subsidyAmountStatus: -2147483648,
    workingStatus: -2147483648,
    stageName: "string",
    secondStageList: [
      {
        stageId: "string",
        stageName: "string"
      }
    ]
  },
  healthCertificate: {
    id: 1,
    validStartTime: "2019-08-24T14:15:22.123Z",
    validEndTime: "2019-08-24T14:15:22.123Z",
    status: 1,
    healthCertificateUrl: "string"
  },
  driverLicense: [
    {
      id: 1,
      drivingLicenseTypeName: "string",
      drivingLicensePhoto: "string",
      drivingLicenseNo: "string",
      drivingLicenseYears: "string",
      actualDrivingYears: "string",
      drivingLicenseValidityStartTime: "2019-08-24T14:15:22.123Z",
      drivingLicenseValidityEndTime: "2019-08-24T14:15:22.123Z",
      status: 1
    }
  ],
  vehicle: {
    id: 1,
    vehicleTypeName: "string",
    vehicleCode: "string",
    vehicleNumber: "string",
    vchicleDepositId: -2147483648,
    vehicleDeposit: 0,
    vehicleUsageFee: 0,
    vehicleUsageFeeId: -2147483648,
    vehicleTypeFrontalView: "string",
    vehicleTypeBackView: "string",
    vehicleTypeLeftView: "string",
    vehicleTypeRightView: "string",
    driverLicenseTypeName: "string"
  }
});
const detailData = ref<Delivery.Detail[]>([]);
const healthCertificateData = ref<Delivery.HealthCertificate[]>([]);
const handleYes = () => {
  examineParms.value.userId = deliveryDetailData.value.detail.userId;
  examineParms.value.auditStatus = "2";
  examineParms.value.reason = reason.value;
  examineAccount();
};
const handleNo = () => {
  examineParms.value.userId = deliveryDetailData.value.detail.userId;
  examineParms.value.auditStatus = "3";
  if (reason.value == "") {
    ElMessage.error("请输入未通过审核原因");
    return;
  }
  examineParms.value.reason = reason.value;
  examineAccount();
};
const getDeliveryDetailData = async (userId: number) => {
  const { code, data, msg } = await getDeliveryDetailAPI(userId);
  if (code == "200" && data) {
    deliveryDetailData.value = data;
    if (data.detail) {
      detailData.value[0] = data.detail;
    }
    if (data.healthCertificate) {
      healthCertificateData.value[0] = data.healthCertificate;
    }
  } else {
    ElMessage.error(msg);
  }
};
const examineAccount = async () => {
  const { msg, code } = await examineAPI(examineParms.value);
  if (code == "200") {
    ElMessage.success(msg);
    if (examineParms.value.auditStatus == "1") {
      router.push({ path: "/cityLevel/cityOrganization/cityDelivery/passed" });
    } else {
      router.push({ path: "/cityLevel/cityOrganization/cityDelivery/notPassed" });
    }
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getDeliveryDetailData(Number(route.query.id));
});
</script>

<style lang="scss" scoped>
body {
  .app-container {
    padding: 15px;
    background-color: white;
  }

  font-size: 13px;
  .titleInfo {
    margin-bottom: 10px;
    span {
      margin-right: 70px;
      font-size: 13px;
      color: gray;
    }
    .carinfo {
      display: inline-block;
      margin-left: 15px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
      p {
        margin: 10px;
        .el-button {
          margin-left: 5px;
        }
      }
    }
    .carstatus {
      display: inline-block;
      float: right;
      margin-right: -135px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;

      // margin-right:50px;
    }
  }
  .baicInfo {
    padding: 10px;
    font-size: 13px;
    color: gray;
    border: 1px solid #e6e6e6;
    div {
      margin-top: 12px;
    }
    .device {
      padding: 20px 10px;
      border: 1px solid #e6e6e6;
      span {
        margin-right: 60px;
      }
    }
  }
  .btn-container {
    text-align: right;
  }
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
